import React, { memo, useEffect } from 'react'
import {useDispatch,shallowEqual,useSelector} from 'react-redux'

import {getRonkingData} from '../../store/actionCreators'

import HYRecommendHeader from '@/components/theme-header-rcm'
import HYRankingItem from '@/components/rank-item'
import {HYRankingContent,HYRecommendMain} from './style'
export default memo(function HYRanking() {
    // redux hook
    const dispatch = useDispatch()
    const state = useSelector((state) => ({
        upRanking: state.getIn(["recommend", "upRanking"]),
        newRanking: state.getIn(["recommend", "newRanking"]),
        originRanking: state.getIn(["recommend", "originRanking"])
      }), shallowEqual);
    // other hook
    useEffect(() => {
        dispatch(getRonkingData(0))
        dispatch(getRonkingData(1))
        dispatch(getRonkingData(2))
    }, [dispatch])
    return (
        <HYRankingContent>
            <HYRecommendHeader params={[]} title={'榜单'}></HYRecommendHeader>
            <HYRecommendMain>
                <HYRankingItem info={state.upRanking}/>
                <HYRankingItem info={state.newRanking}/>
                <HYRankingItem info={state.originRanking}/>
            </HYRecommendMain>
        </HYRankingContent>
    )
})
